
Vue.component('c-editor', {
  template:`
<textarea :id="id" ></textarea>
  `,
  data() {
    return {
      editor:false
    }
  },
  props: {
    value:{
      default:""
    },
    height: {
      default: "500px"
    },
    upload: {
      default: "/admin/upload/image"
    },
    id: {
      default: "id"+(parseInt(Math.random()*1000000000000)).toString(16)
    }
  },

  methods: {
    init(){
      var that=this;
      ClassicEditor
        .create( document.querySelector( '#'+that.id ),{
          language: 'zh-cn',
          ckfinder: {
            uploadUrl : that.upload
          }
        })
        .then( editor => {
            that.editor=editor;
            that.editor.ui.view.editable.editableElement.style.height = that.height;
            that.editor.setData(that.value);
            that.editor.model.document.on( 'change:data', ( evt, data ) => {
              that.sync();
            });

        } )
        .catch( error => {
          console.log(error);
        } );
    },
    sync(){

      if (this.editor){
        var data = this.editor.getData();
        this.$emit('input', data);
      }

    }
  },

  mounted(){
    var that=this;
    this.$nextTick(function () {
      that.init();
    });

  }
});
